body,
html {
    width: 100%;
    height: 100%;
    min-width: 1400px;
}

.left-side {
    width: 60%;
    height: 100%;
    background-color: rgb(0, 167, 242);
}
.right-side {
    width: 40%;
    height: 100%;
}
.left-side img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.login-page {
    width: 416px;
    height: 424px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 登录页面 */
.modal {
    width: 400px;
    height: 554px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 0 20px;
    

}
.modal-mask {
    width: 80px;
    line-height: 70px;
    text-align: center;
    border-radius: 5px;
    position: absolute;
    left: 47%;
    top: 34%;
    transform: translate(-50%,-50%);
    background-color: rgba(0, 0, 0, .3);
    color: #666;
    opacity: 0;
    transition: all 1s;
}
.modal > img {
    position: absolute;
    top: 32px;
    left: 103px;
}
.modal-content {
    width: 100%;
    position: absolute;
    top: 115px;

}
.modal-content p {
    text-align: center;
}
.modal-content p span{
    display: inline-block;
    margin-bottom: 30px;
    line-height: 36px;
    font-size: 16px;
    margin-right: 30px;
    cursor: pointer;
}
.modal-content p .active {
    color: #00bdff;
    /* border-bottom: 2px solid #00bdff; */
    

}
.modal-content p .active::after {
    content: '';
    display: block;
    margin-bottom: 30px;
    width: 70%;
    height: 2px;
    background-color: #19beed;
    margin: 0 auto;
}
.modal-user {
    width: 360px;
}
.modal-content input {
    width: 360px;
    line-height: 36px;
    margin-bottom: 24px;
    padding-left: 30px;
    padding-right: 32px;
    border-bottom: 1px solid #e7e7e7;
}
.modal-content .modal-user .user-img {
   
    width: 26px;
    height: 26px;
    background: -54px 0px url(../imgs/loginIcon.png) no-repeat;
    position: absolute;
    top: 2px;
    left: -2px;
    
}
.modal-content  .delIcon1,
.modal-content  .delIcon2 {
    position: absolute;
    top: 8px;
    right: 12px;
    display: none;
}
.modal-content .modal-psd .psd-img {
   
    width: 26px;
    height: 26px;
    background: -24px 0px url(../imgs/loginIcon.png) no-repeat;
    position: absolute;
    top: 2px;
    left: -2px;
    
}
.modal-content .modal-psd > img {
    position: absolute;
    top: 8px;
    right: 50px;
}
.modal-content .misPsd{
    margin-bottom: 20px;
    width: 360px;
    text-align: right;
    color: #00bdff;
}
.modal-login {
    width: 360px;
    line-height: 44px;
    background-color: #00bdff;
    color: #fff;
}
.loginPage {
    display: none;
}
.loginPage p:last-child{
    margin-top: 20px;
    width: 360px;
    text-align: right;
    color: #666;
}
.loginPage p:last-child a {
    font-size: 12px;
    color: #00bdff;
    
}
.loginPage p:last-child a::after {
    display: block;
    position: absolute;
    top: -3px;
    right: -27px;
    content: '';
    width: 26px;
    height: 26px;
    background: -51px -34px url(../imgs/loginIcon.png) no-repeat;
}
.saoPage {
    display: none;
}
.on {
    display: block;
}



.saoPage > p:last-child{
    margin-top: 20px;
    width: 360px;
    color: #666;
}
.saoPage > p:last-child a {
    font-size: 12px;
    color: #00bdff;
    
}
.qrCode {
    width: 300px;
    height: 242px;
    background-color: #fcfcfc;
    margin: 0 auto;
    text-align: center;
    padding-top: 36px;
}
.qrCode > p {
    margin-bottom: 20px;
}
.qrCode img {
    width: 100px;
    margin-bottom: 20px;

}